<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/1.4.8/angular.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    <input type="text" ng-model="content">
    <div>第{{num}}次数据变化.</div>
    <button ng-click="stopWatch()">停止监测</button>
</div>
<script type="application/javascript">
    var app = angular.module("app", []);
    app.controller("myCtrl", ["$scope", function ($scope) {
        $scope.num = 0;

        // 2：调用contentWatch方法，这个方法对应的就是$watch函数的返回值，即返回一个释放
        // $watch绑定的unbind函数，最终实现停止监测的效果。
        $scope.stopWatch = function () {
            contentWatch();
        }
        // 1:当页面加载完成时，$watch函数将会被首次执行，为了删除在首次监测时不进行累计，
        // 根据首次执行函数newVal和oldVal的值都为"undefined"，即两者此时拥有相同的值，则return，退出累计。
        var contentWatch = $scope.$watch('content',function (newVal,oldVal) {
            console.log("newVal:" + newVal + ";oldVal:" + oldVal);
            if(newVal == oldVal){
                return;
            }
            $scope.num++;
        });
    }]);
</script>
</body>
</html>